Angular5 で Bootstrap4 ( beta ) を使ってみよう #serverless #adventcalendar

Angular5 で Bootstrap4 ( beta ) を使ってみよう #serverless #adventcalendar

Serverless Advent Calendar 2017

Serverless Advent Calendar 2017

#Bootstrap
#Angular
#サーバーレス
和田祐介

和田祐介

facebook logohatena logotwitter logo
Clock Icon2017.12.19

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Angular で Bootstrap を使う機会があったので手順を記録します。Angular は 2017年11月11日にバージョン5.0.0がでました。Bootstrapは 2017年12月19日時点で v4.0.0-beta.2 が利用できます。

利用ツール バージョン
Angular 5.1.1
Bootstrap 4.0.0-beta.2
angular-cli 1.6.1

Angular5 の導入

最新版の angular-cli を使ってプロジェクトを作ることで Angular5 が利用できます。

npm install -g @angular/cli@latest
ng new angular-bootstrap
cd angular-bootstrap
ng version

Angular CLI: 1.6.1
Node: 8.5.0
OS: darwin x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.1
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Bootstrap4 の導入

Angular で Bootstrap を使う方法はいくつかありますが、今回は npm を使ってインストールした場合の導入方法を説明します。まずは npm でインストールしましょう。また、Bootstrap4 を使うにあたり必要になるスクリプトも一緒に導入します。

npm install --save bootstrap@4.0.0-beta.2
npm install --save jquery popper.js

Angular では、グローバルに読み込むCSSやスクリプトを .angular-cli.json で指定できます。Bootstrap公式サイトの導入を見ながら、必要なCSS、JSのパスを指定することで読み込ませます。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular-bootstrap"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.slim.min.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

これだけで使える状態になります。コンポーネントを作って Bootstrap の class を指定してみましょう。

ng g component card-ui

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="/assets/img_318_180.svg" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!--The content below is only a placeholder and can be replaced.-->
<app-card-ui></app-card-ui>

ng serve

その後、http://localhost:4200 にアクセスします。

blowser.png

Bootstrap4 の Card UI が表示されていることがわかります。新しく作成したコンポーネントにも、Bootstrap のCSSが効いていることがわかりました。ただ、気になるエラーが出ていますね。

http://localhost:4200/bootstrap.min.js.map
Failed to load resource: the server responded with a status of 404 (Not Found)

どうやらソースマップを読み込もうとして失敗しているようです。npm経由で取得した Bootstrap の Javascript は、（おそらくデバッグのための）ソースマップへのリンクが記載されいてます。npm モジュールとして require('bootstrap') のような形で使う場合は問題になりませんが、今回のようにピンポイントで Javascript のパスだけ指定しているような場合は関連する asset へのパスを見失うことがあります。解決策として、 .angular-cli.json にソースマップの場所を教えてやればOKです。jquery, popper.js も同様でしたので同じようにソースマップを追加しました。

...前略...
{
  ...
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        { "glob": "jquery.slim.min.js.map", "input": "../node_modules/jquery/dist/", "output": "./" },
        { "glob": "popper.min.js.map", "input": "../node_modules/popper.js/dist/umd/", "output": "./" },
        { "glob": "bootstrap.min.js.map", "input": "../node_modules/bootstrap/dist/js/", "output": "./" }
      ],
      ...
    }
  ]
}
...後略...

これで、デバッグコンソールでみたときにエラーはでなくなりました。ただしこの方法は、おそらく本番環境用ビルド ng build --prod でビルドした場合も asset ファイルとして成果物に含まれることになると思います。やや成果物を肥大化させてしまうことになります。

Bootstrap4 の Card UI を試す

このタイプのUI、とくにECサイトや、最近ではニュースサイトでも見かけますね。Bootstrap で手軽に実装できるようになったのは嬉しいポイントです。いくつか試してみます。

Card groups

<div class="container-fluid">
  <div class="card-group">
    <div class="card">
      <img class="card-img-top" src="/assets/019Yamasha1218_TP_V.jpg" alt="Card image cap">
      <div class="card-body">
        <h4 class="card-title">蓼科山山頂から望む厳冬期八ヶ岳連峰</h4>
        <p class="card-text">山頂はとても寒いです。2500メートルを超える高さを誇り、頂上からの長めは絶景です。</p>
        <p class="card-text">
          <small class="text-muted">Last updated 3 mins ago</small>
        </p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="/assets/gunma-IMG_6125_TP_V.jpg" alt="Card image cap">
      <div class="card-body">
        <h4 class="card-title">毛無峠から破風岳のルート</h4>
        <p class="card-text">近辺での硫黄採掘が始まり、精錬時に発生する亜硫酸ガスによって裸山になってしまいました。鉱山跡は観光スポットにもなっています。</p>
        <p class="card-text">
          <small class="text-muted">Last updated 5 days ago</small>
        </p>
      </div>
    </div>
    <div class="card">
      <img class="card-img-top" src="/assets/1711163AMEMAN005_TP_V.jpg" alt="Card image cap">
      <div class="card-body">
        <h4 class="card-title">八幡平の紅葉渓谷</h4>
        <p class="card-text">岩手県の紅葉名所。松川温泉もあり特に秋は絶好の観光スポットです。</p>
        <p class="card-text">
          <small class="text-muted">Last updated 10 days ago</small>
        </p>
      </div>
    </div>
  </div>
</div>

card-group.png

Image overlays

<div class="card bg-dark text-white">
  <img class="card-img" src="/assets/gunma-IMG_6125_TP_V.jpg" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">毛無峠から破風岳のルート</h4>
    <p class="card-text">近辺での硫黄採掘が始まり、精錬時に発生する亜硫酸ガスによって裸山になってしまいました。鉱山跡は観光スポットにもなっています。</p>
  </div>
</div>

image_overlays.png

Header and footer

<div class="card text-center">
  <div class="card-header">
    ピザ＆ワインからのお知らせ
  </div>
  <div class="card-body">
    <h4 class="card-title">白ワインのセットご注文で5%OFF!</h4>
    <img class="card-img" src="/assets/tachiaraiIMGL4852_TP_V.jpg" alt="Card image">
    <p class="card-text">週末のパーティにいかがですか？</p>
    <a href="#" class="btn btn-primary">購入ページへ行く</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

header_footer.png

まとめ

Angular で Bootstrap を利用する一例を紹介しました。Angular の考え方としてコンポーネント指向がベースとなっており、コンポーネントを組み合わせて画面を構成していくことになると思います。Bootstrap のように、全コンポーネントでCSSを利用したいといったシーンで、 .angular-cli.json への設定を追加することがわかれば、いろいろと応用できますね。Bootstrap は新しく追加された Card UI を始め、コンポーネントの見た目を手早く整えてくれるのでSPAを作る際などはかなり重宝することになるでしょう。Bootstrap を利用する際の参考になれば幸いです。

参考

Share this article

facebook logohatena logotwitter logo

関連記事

นำ Bootstrap มาใช้ใน Laravel กันเถอะ

นำ Bootstrap มาใช้ใน Laravel กันเถอะ

User avatar
Chawish Tilakul
2020.08.17
Bootstrap4によってボタンやフォームに適用されるスタイルを無効化する方法

Bootstrap4によってボタンやフォームに適用されるスタイルを無効化する方法

User avatar
西村祐二
2018.08.17
Angular6でBootstrap4を使ってみる

Angular6でBootstrap4を使ってみる

User avatar
西村祐二
2018.06.12
[AngularJS] カレンダーにおける日付 (Date) のお世話サンプル

[AngularJS] カレンダーにおける日付 (Date) のお世話サンプル

User avatar
たいが
2014.07.07
Classmethod's white logo
Facebook's logo
X's logo
YouTube's logo

© Classmethod, Inc. All rights reserved.